<template>
  <div class="appserver">
    <van-nav-bar
    title="服务"
    left-arrow
    @click-left="$router.go(-1)"
    />
    <div><h4>自助服务</h4></div>
    <van-grid :column-num="4">
      <van-grid-item v-for="(item, index) in list" :key="index" :icon="item.icon" :text="item.text" />
    </van-grid>
    <div class="ui-line"></div>
    <div class="servers">
      <img src="@/assets/servers.png" alt="">
      <span>7×24小时在线客服</span>
    </div>
    <van-grid :column-num="3">
  <van-grid-item>
    <van-icon name="phone-o" size="30" color="rgb(103,204,248)"/>
    <span style="font-size: 13px;" >商城热线</span>
    <span style="font-size: 12px; color: red">400-100-5678</span>
    <span style="font-size: 12px; color: gray">8:00 - 18:00</span>
  </van-grid-item>
  <van-grid-item>
    <van-icon name="phone-o" size="30" color="greenyellow"/>
    <span style="font-size: 13px;" >金融热线</span>
    <span style="font-size: 12px; color: red">400-100-3399</span>
    <span style="font-size: 12px; color: gray">9:00 - 19:00</span>
  </van-grid-item>
  <van-grid-item>
    <van-icon name="phone-o" size="30" color="orange"/>
    <span style="font-size: 13px;" >小米移动</span>
    <span style="font-size: 12px; color: red">400-922-3838</span>
    <span style="font-size: 12px; color: gray">9:00 - 18:00</span>
  </van-grid-item>
</van-grid>
  </div>
</template>
<script>
import Vue from 'vue'
import { Grid, GridItem, Image, Icon } from 'vant'

Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Image)
Vue.use(Icon)
export default {
  name: 'AppServer',
  data () {
    return {
      list: [
        { icon: 'service-o', text: '售后服务' },
        { icon: 'newspaper-o', text: '售后政策' },
        { icon: 'guide-o', text: '服务网点' },
        { icon: 'failure', text: '故障排除' },
        { icon: 'records', text: '客服反馈' },
        { icon: 'after-sale', text: '维修价格' },
        { icon: 'certificate', text: '真伪查询' },
        { icon: 'cashier-o', text: '以旧换新' },
        { icon: 'balance-o', text: '小米延保申领' },
        { icon: 'refund-o', text: '保障权益查询' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.appserver{
  .ui-line {
    width: 100%;
    height: .1rem;
    background-color: rgb(245, 245, 245);
  }
  .servers {
    width: 100%;
    height: .6251rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .12rem;
    color: black;
    img {
      width: .3156rem;
    }
    span {
      padding-left: .15rem;
    }
  }
  div {
    h4 {
      margin: 0;
      margin-left: 0.16rem;
      font-size: .13rem;
      line-height: .36rem;
      border-bottom: 1px solid #f6f6f6;
      color: #434141;
      font-weight: 400;
      text-align: left;
    }
  }
}
</style>
